<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员中心</title>
    <script type="text/javascript"></script>
    <script src="/js/jquery-3.5.1.js"></script>
    <style>
        body{
            background: #159f9f;
        }
        .container{
            margin: 0 auto;
            width: 500px;
        }
        form{
            height: 450px;
            width: 450px;
            margin: 0 auto;
            background: #FFF;
            border-radius: 15px;
            position: relative;
        }
        h1{
            font-size: 28px;
            text-align: center;
            color: #FFF;
        }
        .p{
            color: red;
            margin-left: 33px;
            display: inline-block;//不占单独一行的块级元素
        }
        label{
            font-size: 18px;
            font-weight: bold;
        }
        .register{
            height: 35px;
            width: 300px;
        }
        .q{
            color:red;
            margin-left:17px;
            display:inline-block;
        }

        .submit{
            border-radius: 7px;
            margin-left: 150px;
            height: 35px;
            width: 150px;
            background-color: #000;
            border: none;
            display: block;
            padding: 0;
            color: #FFF;
            font-weight: bold;
            cursor: pointer;
        }
        a{
            text-decoration: none;
            font-weight: bold;
        }
        .left,.right{
            position: absolute;
            bottom: 20px;
        }
        .left{
            left: 20px;
        }
        .right{
            right: 20px;
        }


    </style>
</head>
<body>
<div class="container">
    <h1>管理员注册</h1><div ><h1 class="reg"></h1></div>
    <form >
        <br>
        <span class="p">*</span>
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" onblur="regis()" placeholder="" class="register" >
        <br><span id="name" style="color: red; padding-left: 40px" ></span><br><br>
        <span class="p">*</span>
        <label for="phonenumber">手机号</label>
        <input type="text" name="phone" id="phonenumber" class="register"><br><span id="ph" style="color: red; padding-left: 40px" ></span>
        <br><br>
        <span class="q">*</span>
        <label for="pwd">登录密码</label>
        <input type="password" name="pwd" id="pwd" class="register"><br><span></span><br><br>
        <span class="q">*</span>

        <label for="c_pwd">确认密码</label>
        <input type="password" name="" id="c_pwd" class="register" onblur="checkrepwd()"><br><span id="repwd" style="color: red; padding-left: 40px" ></span><br><br>
        <span class="p">*</span>
        <label>权限等级 &nbsp;&nbsp;<span><input type="radio"  class="admin" name="admin" checked value="2">普通管理员</span>
            <input type="radio" name="admin" class="admin" value="1">超级管理员</span>
        </label>
        <!--        <input type="text" id="verify" class="register" name=""><br><br>-->
        <br>
        <input type="button" name="register" id="submit" value="注册" class="submit"><br>
<!--        <a href="index.html" class="left">返回首页</a>-->
<!--        <a href="login.html" class="right">开始登录</a>-->
    </form>
</div>

</body>

<script>
    // $("username").onblur=function () {
    //     if (!$("username").value()){
    //         $("name").innerHTML="用户名不能为空";
    //     }
    // }

    var username = document.getElementById("username");

    username.onblur=function () {
        if (!username.value){
            document.getElementById("name").innerHTML="用户名不能为空";
        }else {
            document.getElementById("name").innerHTML="";
        }
    }

    var phone = document.getElementById("phonenumber");
    var phone1 = document.getElementById("ph");
    phone.onblur = function (){
        if (!phone.value){
            phone1.innerText="手机号不能为空";
            return false;
        }else if (!(phone.value.match(/^\d{5,11}$/))){
            phone1.innerText="请输入正确的手机号";
            return false;
        }else {
            phone1.innerText="√";
            phone1.style.color="green";
            return true;
        }
    }

    $(function (){
        $("#submit").click(function (){
            let userName=$("#username").val();
            console.log("--------------"+userName);
            let phonenumber=$("#phonenumber").val();
            console.log(phonenumber)
            $.get("/value1111.admin",{"username":userName,"phone":phonenumber},function (text){
                console.log("------------"+text)
                if(text){
                    let pwd=  $("#pwd").val();
                    let admin=$(".admin").val()
                    console.log(admin)
                    $.get("/registAdmin.admin",{"username":userName,"phone":phonenumber,"pwd":pwd,"admin":admin},function (text) {
                        console.log("-----------"+text)
                        if(text){
                            $(".reg").html("注册成功")

                        }else {
                            $(".reg").html("注册失败")
                        }

                    })
                }else {
                    $(".reg").html("用户名或密码已被注册")

                }
            })
        })

    })



    function checkrepwd() {
        var pwd=document.getElementById("pwd").value;
        var c_pwd=document.getElementById("c_pwd").value;
        if(pwd==c_pwd) {
            document.getElementById("repwd").innerText="√";
        }else{
            document.getElementById("repwd").innerText="两次密码不一致";
        }
    }





</script>


</html>